<template>
  <ul class="right-box">
    <!-- 搜索框 -->
    <li class="item">
      <!-- <input type="text" class="search" placeholder="请输入" /> -->
      <Input placeholder="请输入..." v-model="search_keyword" search @on-search="search()" />
    </li>
    <!-- 写文章 -->
    <li class="add item" v-if="isAuthenticated">
      <button class="write" @click="write()">写文章</button>
    </li>
    <!-- 消息 -->
    <li class="msg item" v-if="isAuthenticated">
      <a href>
        <Badge dot>
          <Icon type="md-notifications" size="26" color="#71777c"></Icon>
        </Badge>
      </a>
    </li>
    <!-- 头像 -->
    <li class="logo item" v-if="isAuthenticated">
      <Dropdown trigger="click" placement="bottom-end" class="dropdown_wrapper">
        <img :src="user.avatar" alt="avatar" class="avatar" v-if="user.avatar" />
        <div slot="list" class="dropdown_item user_option">
          <ul>
            <DropdownItem>
              <li class="dropdown-item">
                <router-link class="option" :to="'/user/' + this.user.uid">
                  <i class="iconfont icon-user"></i>
                  <span>我的主页</span>
                </router-link>
              </li>
            </DropdownItem>

            <DropdownItem>
              <li class="dropdown-item">
                <router-link to="/editor" class="option">
                  <i class="iconfont icon-xieyingping"></i>
                  <span>写文章</span>
                </router-link>
              </li>
            </DropdownItem>
            <DropdownItem>
              <li class="dropdown-item">
                <router-link class="option" :to="'/user/' + this.user.uid+'/collections'">
                  <i class="iconfont icon-shoucang"></i>
                  <span>收藏集</span>
                </router-link>
              </li>
            </DropdownItem>
            <DropdownItem>
              <li class="dropdown-item">
                <router-link class="option" :to="'/user/settings'">
                  <i class="iconfont icon-shezhi"></i>
                  <span>设置</span>
                </router-link>
              </li>
            </DropdownItem>
            <DropdownItem>
              <li class="dropdown-item">
                <div @click="logout()" class="option">
                  <i class="iconfont icon-log-out"></i>
                  <span>登出</span>
                </div>
              </li>
            </DropdownItem>
          </ul>
        </div>
      </Dropdown>
    </li>
    <!-- 登录注册 -->
    <li class="auth item" v-if="!isAuthenticated">
      <a @click="showAuthBox(true)">登录</a>
      <span>|</span>
      <a @click="showAuthBox(false)">注册</a>
    </li>
  </ul>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "navright",
  data() {
    return {
      search_keyword: ""
    };
  },
  computed: {
    ...mapState({
      isAuthenticated: state => state.isAuthenticated,
      user: state => state.user
    })
  },
  methods: {
    //从vuex拉去用户信息
    getUserInfo() {},

    write() {
      this.$router.push({ path: "/editor" });
    },
    showAuthBox(flag) {
      this.$store.dispatch("setIsToLogin", flag);
    },
    logout() {
      // alert("logout");
      // 清除token
      localStorage.removeItem("auth");
      location.reload();
    },
    mypage() {
      this.$router.push({
        path: "/user/" + this.user.uid
      });
    },
    search() {
      if (this.search_keyword != "" && this.search_keyword != null) {
        this.$router.push({
          path: "/search",
          query: {
            s: this.search_keyword
          }
        });
      } else {
        return;
      }
    }
  }
};
</script>

<style lang='scss'>
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.right-box {
  display: flex;
  height: inherit;
  .logo,
  .msg {
    cursor: pointer;
  }
  .auth {
    color: #70a1ff;
    a {
      color: #70a1ff;
    }
    span {
      margin: 0 0.5rem;
    }
  }
  .item {
    position: relative;
    align-items: center;
    display: flex;
    margin-right: 30px;
    .icon-xiaoxi {
      font-size: 18px;
      color: #71777c;
    }
    .icon-xiaoxi:hover {
      color: #1e90ff;
    }
    .search {
      height: 36px;
      border: none;
      border-radius: 4px;
      background: #f3f3f3;
      outline: none;
      padding: 0 15px;
    }
    .write {
      height: 36px;
      padding: 0 15px;
      border-radius: 4px;
      border: none;
      outline: none;
      color: #fff;
      background-color: #1e90ff;
    }
    .write:hover {
      background-color: #2081df;
    }

    .dropdown_wrapper {
      .avatar {
        width: 40px;
        height: 40px;
        vertical-align: middle;
        object-fit: cover;
        border-radius: 4px;
      }
      .user_option {
        width: 10rem;
        ul {
          .ivu-dropdown-item {
            padding: 0;
          }
          .dropdown-item {
            text-align: left;
            list-style: none;
            .option {
              display: block;
              color: #71777c;
              padding: 0.8rem;
              font-size: 0.95rem;
              line-height: 1;
              .iconfont {
                margin-right: 0.5rem;
                width: 20px;
              }
            }
          }
          .dropdown-item:first-child {
            margin-top: 0.7rem;
          }
          .dropdown-item:last-child {
            margin-bottom: 0.7rem;
          }

          .dropdown-item:hover {
            background-color: #eeeeee;
          }
        }
      }
    }

    .ivu-select-dropdown {
      top: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      border: 1px solid #ddd;
      // width: 20rem;
      z-index: 9999;
    }
  }
  .item:last-child {
    margin: 0;
  }
}
@media screen and (max-width: 980px) {
  .right-box .add {
    display: none;
  }
}
@media screen and (max-width: 500px) {
  .right-box .msg {
    display: none;
  }
}
</style>